export default function Body() {
  return (
    <main className="flex flex-1 dark:mix-blend-difference">
      <section className="flex flex-col min-w-full">
        {" "}
        <section
          className="flex flex-col min-h-full px-8 lg:px-20"
          data-svelte-h="svelte-95akqe"
        >
          {" "}
          <div className="flex flex-1 justify-center items-center invisible sm:visible">
            {" "}
            <svg width="189px" height="189px" viewBox="0 0 189 189" fill="none">
              <path
                id="Vector"
                d="M30.4227 108.445L40.6803 98.1203L48.5666 106.058L30.0682 124.677L0.70482 95.1222L30.0678 65.5677L70.0435 105.804L62.1576 113.741L30.4227 81.7994L30.068 81.4424L29.7133 81.7994L16.827 94.7696L16.4768 95.122L16.827 95.4744L29.7133 108.445L30.068 108.802L30.4227 108.445ZM73.0227 22.3335L112.998 62.5693L105.112 70.5069L73.3773 38.5655L73.0226 38.2085L72.6679 38.5655L59.7815 51.5358L59.4314 51.8882L59.7815 52.2406L70.0437 62.5695L62.1578 70.5068L43.6594 51.888L73.0227 22.3335ZM76.0015 127.675L83.8871 119.738L115.622 151.68L115.977 152.037L116.331 151.68L129.218 138.709L129.568 138.357L129.218 138.005L118.956 127.676L126.842 119.738L145.341 138.356L115.977 167.911L76.0015 127.675ZM126.842 76.5037L158.577 108.445L158.932 108.802L159.287 108.445L172.173 95.4749L172.523 95.1225L172.173 94.7701L159.287 81.7999L158.932 81.4429L158.577 81.7999L148.32 92.1242L140.433 84.1866L158.932 65.5679L188.295 95.1223L158.932 124.677L118.956 84.441L126.842 76.5037ZM73.3773 151.679L83.6349 141.354L91.5211 149.292L73.0227 167.911L43.6594 138.356L83.6347 98.1201L91.521 106.058L59.7815 138.004L59.4314 138.356L59.7815 138.709L72.6679 151.679L73.0226 152.036L73.3773 151.679ZM105.368 92.12L97.4825 84.1828L129.222 52.2368L129.572 51.8844L129.222 51.5319L116.336 38.5617L115.981 38.2047L115.626 38.5617L105.369 48.8861L97.4826 40.9488L115.981 22.3297L145.344 51.8842L105.368 92.12ZM91.5208 62.8237L62.4101 92.1239L54.5242 84.1866L83.6349 54.8865L91.5208 62.8237ZM76.0017 84.4408L83.8876 76.5036L112.998 105.804L105.112 113.741L76.0017 84.4408ZM97.4786 127.421L126.589 98.1205L134.476 106.058L105.365 135.358L97.4786 127.421ZM94.669 30.6567L79.7922 15.683L94.669 0.709411L109.546 15.683L94.669 30.6567ZM94.6691 188.291L79.7923 173.317L94.6691 158.343L109.546 173.317L94.6691 188.291Z"
                className="fill-black dark:fill-white stroke-black dark:stroke-white"
              ></path>
            </svg>
          </div>{" "}
          <div className="flex flex-col lg:flex-row justify-between lg:space-x-10 dark:text-white">
            {" "}
            <div className="flex flex-col space-y-1 lg:space-y-3 pb-4 lg:pb-8">
              <h1 className="max-w-60 sm:max-w-none text-4xl font-bold mb-0.5 sm:mb-0">
                Ritual brings AI on-chain
              </h1>{" "}
              <p className="font-barlow text-md lg:text-lg lg:max-w-xl opacity-80">
                We are building a way for any protocol, application, or smart
                contract to integrate AI models with a few lines of code.
              </p>
            </div>{" "}
            <div className="lg:max-w-96 w-full space-y-3 font-barlow">
              {" "}
              <div className="lg:flex flex-row items-center hidden">
                <div className="bg-black dark:bg-white h-[1px] opacity-20 flex-1 mr-2.5"></div>{" "}
                <span className="font-barlow opacity-50 text-sm">
                  GET STARTED
                </span>{" "}
                <div className="bg-black dark:bg-white h-[1px] opacity-20 flex-1 ml-2.5"></div>
              </div>{" "}
              <div>
                <a
                  href="/about"
                  className="text-md text-white dark:text-black bg-black dark:bg-white flex py-2.5 justify-center hover:opacity-80 transition-opacity"
                >
                  What is Ritual?
                </a>
              </div>{" "}
              <div className="flex flex-row space-x-3">
                <a
                  href="https://docs.ritual.net/infernet/node/quickstart"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="w-2/3 text-md bg-ritual-black-10 dark:bg-ritual-white-10 border border-ritual-black-20 dark:border-ritual-white-20 flex py-2.5 justify-center hover:opacity-70 transition-opacity"
                >
                  Run a node ↗
                </a>{" "}
                <a
                  href="/careers"
                  className="w-1/3 text-md border border-ritual-black-20 dark:border-ritual-white-20 flex py-2.5 justify-center hover:opacity-70 transition-opacity"
                >
                  Careers
                </a>
              </div>
            </div>
          </div>
        </section>
      </section>
    </main>
  );
}
